<template>
  <div foodamount="2">
    <section class="index-container_10L_lQb shopitem-aFg1-">
      <div class="index-shopInfo_1RRTZ0d">
        <div class="logo-container_XoH2Vit_0">
          <div class="logo-main_21aInWJ_0">
            <img :alt="rest.name" class="logo-logo_3S1eSkn_0"
                 :src="'//fuss10.elemecdn.com/'+ image_url+
                 '?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/'">
          </div>
        </div>
        <div class="index-main_N3FfcSz">
          <section class="index-line_2-iYR1A">
            <h3 class="index-shopname_39Y7e3U">
              <span>{{rest.name}}</span>
            </h3>
            <!--<ul class="index-supportWrap_2lTcxr2"></ul>-->
          </section>
          <section class="index-line_2-iYR1A">
            <div class="index-rateWrap_39dWx_g">
              <div class="Rating-wrapper_TYbDrku_0 index-stars_vPkk9Vv">
                <div class="Rating-gray_1kpffd5_0">
                  <img src="">
                </div>
                <div class="Rating-actived_GBtiHkB_0" :style="{width: rest.rating*100/5 + '%' }" >
                  <img src="">
                </div>
              </div>
              <span>{{rest.rating}}月售{{rest.recent_order_num}}单</span>
            </div>
          </section>
          <section class="index-line_2-iYR1A">
            <span>￥{{rest.float_minimum_order_amount}}元起送|配送费￥{{rest.float_delivery_fee}}</span>
            <span>{{rest.distance | formatSaveTwoNumAfterPoint}}</span>
          </section>
        </div>
      </div>
      <div class="index-activityWrap_3mo1GyG">
        <section class="index-tagLine_1rJw_lq">
          <div v-for="tag in rest.support_tags">
            <span class="mini-tag-tag_3Tm_6bw_0 index-tag_3oprLi5">
              "{{tag.text}}"
              <span class="index-tagGhost_1KCu_KY mini-tag-ghost_3DwLU8E_0"
                    style="color: rgb(102, 102, 102); border-color: rgb(221, 221, 221);"
                    >
                {{tag.text}}
              </span>
            </span>
          </div>
          <span class="index-recommendTag__2apOBL" v-show="rest.recommend.reason !=''">
            <img src="//fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!20x20r/gravity/Center/crop/20x20/">
            <span>{{rest.recommend.reason}}</span>
          </span>
        </section>
        <span>
          <img src="">
        </span>
        <section class="index-activities_25AUDsx">
          <div class="index-activityList_1wvwwUY">
            <div v-for="(item,index) in rest.activities">
              <div class="index-actRow_2f_uNNA" v-show="index < 2 || showAllActivities">
                <span class="index-iconWrap_1xJuKaY">
                  <span class="index-icon_1fBCxBk"
                        style="background-color: rgb(112, 188, 70);">
                    {{item.icon_name}}
                  </span>
                </span>
                <span class="index-desc_JLha7Vr">{{item.description}}</span>
              </div>
            </div>
           </div>
          <div @click="showAllActivities = !showAllActivities" class="index-activityBtn_tMk-e1C">
            <span>{{rest.activities.length}}个活动</span>
            <img src="" class="">
          </div>
        </section>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: "restaurant-list",
    props: ["rest"],
    data:function(){
      return {
        showAllActivities: false
      }
    },
    filters: {
      formatSaveTwoNumAfterPoint(value) {
        if (value > 1000)
          return Math.round(value / 10) / 100 + "km";
        else
          return value + "m";
      },
    },
    computed: {
      image_url() {
        let value = this.rest.image_path;
        let firstParam = value.substring(0, 1) + "/";
        let secondParam = value.substring(1, 2) + "/";
        let threeParam = value.substring(2) + ".";
        let last = value.match(/png|jpeg$/g);
        return firstParam + secondParam + threeParam + last;
      }
    }

  }
</script>

<style scoped>
  img {
    max-width: 100%;
  }

  *, :after, :before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  user agent stylesheet
  article, aside, footer, header, hgroup, main, nav, section {
    display: block;
  }

  .shopitem-aFg1- {
    border-bottom: none;
  }

  .index-container_10L_lQb {
    position: relative;
    border-bottom: .013333rem solid #eee;
    border-bottom: .133333vw solid #eee;
    background-color: #fff;
    color: #666;
    padding: .4rem 0;
    padding: 4vw 0;
    list-style: none;
    font-size: .293333rem;
    line-height: normal;
  }

  .index-shopInfo_1RRTZ0d {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;
    padding: 0 .266667rem;
    padding: 0 2.666667vw;
  }

  .logo-container_XoH2Vit_0 {
    position: relative;
    -webkit-flex: none;
    flex: none;
    z-index: 0;
  }

  .logo-main_21aInWJ_0 {
    position: relative;
    width: 1.733333rem;
    width: 17.333333vw;
    height: 1.733333rem;
    height: 17.333333vw;
  }

  .logo-logo_3S1eSkn_0 {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .053333rem;
    border-radius: .533333vw;
    border: .013333rem solid rgba(0, 0, 0, .08);
    border: .133333vw solid rgba(0, 0, 0, .08);
  }

  .index-line_2-iYR1A, .index-shopname_39Y7e3U {
    -webkit-align-items: center;
    align-items: center;
  }

  .index-line_2-iYR1A, .index-main_N3FfcSz {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    overflow: hidden;
  }

  .index-shopname_39Y7e3U {
    display: -webkit-flex;
    display: flex;
    margin: 0;
    padding: 0;
    color: #333;
    font-weight: 700;
    font-size: .6rem;
    overflow: hidden;
  }

  .index-supportWrap_2lTcxr2 {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: .266667rem;
    margin-left: 2.666667vw;
  }

  ol, ul {
    list-style: none;
  }

  .index-supportWrap_2lTcxr2 > li:last-child {
    margin-right: .013333rem;
    margin-right: .133333vw;
  }

  .index-supportWrap_2lTcxr2 > li {
    position: relative;
    height: .346667rem;
    height: 3.466667vw;
    width: .346667rem;
    width: 3.466667vw;
    margin-left: .08rem;
    margin-left: .8vw;
  }

  .index-line_2-iYR1A, .index-shopname_39Y7e3U {
    -webkit-align-items: center;
    align-items: center;
  }

  .index-line_2-iYR1A, .index-main_N3FfcSz {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    overflow: hidden;
  }
  .index-main_N3FfcSz {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-user-select: none;
    user-select: none;
    padding-left: .266667rem;
    padding-left: 2.666667vw;
  }
  .index-rateWrap_39dWx_g {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }

  .Rating-wrapper_TYbDrku_0 {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
  }

  .index-rate_WsK58g8, .index-stars_vPkk9Vv {
    margin-right: .106667rem;
    margin-right: 1.066667vw;
  }

  .Rating-actived_GBtiHkB_0, .Rating-gray_1kpffd5_0 {
    display: -webkit-flex;
    display: flex;
  }

  .Rating-actived_GBtiHkB_0 {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .Rating-actived_GBtiHkB_0, .Rating-gray_1kpffd5_0 {
    display: -webkit-flex;
    display: flex;
  }
  .Rating-actived_GBtiHkB_0 img, .Rating-gray_1kpffd5_0 img {
    width: 1.493333rem;
    width: 14.933333vw;
    height: .266667rem;
    height: 2.666667vw;
    -webkit-flex: none;
    flex: none;
    max-width: none;
  }
  .index-line_2-iYR1A, .index-shopname_39Y7e3U {
    -webkit-align-items: center;
    align-items: center;
  }

  .index-line_2-iYR1A, .index-main_N3FfcSz {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    overflow: hidden;
  }

  .index-moneylimit_2fCq9W5 {
    display: -webkit-flex;
    display: flex;
    -webkit-align-content: center;
    align-content: center;
  }

  .index-moneylimit_2fCq9W5 span:nth-of-type(2) {
    overflow: hidden;
    max-width: 2.666667rem;
    max-width: 26.666667vw;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .index-moneylimit_2fCq9W5 span + span:before {
    margin: 0 .08rem;
    margin: 0 .8vw;
    color: #ddd;
    content: "|";
  }

  .index-timedistanceWrap_2Dp_kzY {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: #999;
  }

  .index-timedistanceWrap_2Dp_kzY {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: #999;
  }

  .index-timedistanceWrap_2Dp_kzY span:after {
    margin: 0 .08rem;
    margin: 0 .8vw;
    color: #ddd;
    content: "|";
  }

  .index-activityWrap_3mo1GyG {
    padding-left: 2.266667rem;
    padding-left: 22.666667vw;
  }

  .index-tagLine_1rJw_lq {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }

  .index-tagLine_1rJw_lq > span {
    margin-right: .133333rem;
    margin-right: 1.333333vw;
  }

  .mini-tag-tag_3Tm_6bw_0 {
    position: relative;
    font-size: .266667rem;
    color: transparent;
    white-space: nowrap;
  }

  .index-tag_3oprLi5 {
    padding: 0 .106667rem;
    padding: 0 1.066667vw;
  }

  .mini-tag-ghost_3DwLU8E_0 {
    position: absolute;
    left: 0;
    top: 0;
    right: -100%;
    bottom: -100%;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: .533rem;
  }

  .index-tagGhost_1KCu_KY {
    border: .026667rem solid #ddd;
    border: .266667vw solid #ddd;
    border-radius: .053333rem;
    border-radius: .533333vw;
    padding: 0 .213333rem;
    padding: 0 2.133333vw;
  }


  .index-tag_3oprLi5 {
    padding: 0 .106667rem;
    padding: 0 1.066667vw;
  }

  .index-tagGhost_1KCu_KY {
    border: .026667rem solid #ddd;
    border: .266667vw solid #ddd;
    border-radius: .053333rem;
    border-radius: .533333vw;
    padding: 0 .213333rem;
    padding: 0 2.133333vw;
  }

  .index-recommendTag__2apOBL {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border-radius: .013333rem;
    border-radius: .133333vw;
    font-size: .266667rem;
    color: #666;
    height: .4rem;
    height: 4vw;
    padding: 0 .106667rem;
    padding: 0 1.066667vw;
    color: #e8470b;
  }

  recommendTag__2apOBL img {
    margin-top: .04rem;
    margin-top: .4vw;
    height: .266667rem;
    height: 2.666667vw;
    width: .266667rem;
    width: 2.666667vw;
    margin-right: .08rem;
    margin-right: .8vw;
  }

  .index-dashedline_7B79b3W {
    width: 100%;
    height: .013333rem;
    height: .133333vw;
    padding-right: .266667rem;
    padding-right: 2.666667vw;
  }

  .index-activities_25AUDsx {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: stretch;
    align-content: stretch;
    overflow: hidden;
  }

  .index-activityList_1wvwwUY {
    -webkit-flex: 1;
    flex: 1;
    padding-right: .266667rem;
    padding-right: 2.666667vw;
    overflow: hidden;
  }

  .index-actRow_2f_uNNA {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: .293333rem;
    line-height: .48rem;
    line-height: 4.8vw;
  }

  .index-actRow_2f_uNNA .index-iconWrap_1xJuKaY {
    display: inline-block;
    position: relative;
    margin-right: .16rem;
    margin-right: 1.6vw;
    height: .373333rem;
    height: 3.733333vw;
    width: .373333rem;
    width: 3.733333vw;
    vertical-align: middle;
  }

  .index-actRow_2f_uNNA .index-icon_1fBCxBk {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    height: .746667rem;
    height: 7.466667vw;
    width: .746667rem;
    width: 7.466667vw;
    font-size: .56rem;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: .106667rem;
    border-radius: 1.066667vw;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .index-actRow_2f_uNNA .index-desc_JLha7Vr {
    display: inline-block;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .index-activityBtn_tMk-e1C {
    padding: .08rem .266667rem 0 0;
    padding: .8vw 2.666667vw 0 0;
    color: #999;
    text-align: right;
    font-size: .266667rem;
    line-height: 1;
  }

  .index-activityBtn_tMk-e1C span {
    vertical-align: middle;
  }

  .index-activityBtn_tMk-e1C img {
    width: .173333rem;
    width: 1.733333vw;
    opacity: .9;
    margin-left: .106667rem;
    margin-left: 1.066667vw;
    transition: all .3s ease-in-out;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    fill: currentColor;
    will-change: transform;
    vertical-align: middle;
    position: relative;
    z-index: 1;
  }


  /*介绍和优惠活动*/
  .index-activityWrap_3mo1GyG {
    padding-left: 2.266667rem;
    padding-left: 22.666667vw;
  }
  .index-tagLine_1rJw_lq, .index-tagsSlot_3bpWx9O {
    margin: .266667rem .266667rem 0 0;
    margin: 2.666667vw 2.666667vw 0 0;
  }
  .index-tagLine_1rJw_lq {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .index-tagLine_1rJw_lq>span {
    margin-right: .133333rem;
    margin-right: 1.333333vw;
  }
  .mini-tag-tag_3Tm_6bw_0 {
     position: relative;
     font-size: .266667rem;
     color: transparent;
     white-space: nowrap;
   }
  .index-tag_3oprLi5 {
    padding: 0 .106667rem;
    padding: 0 1.066667vw;
  }
  .mini-tag-ghost_3DwLU8E_0 {
    position: absolute;
    left: 0;
    top: 0;
    right: -100%;
    bottom: -100%;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    font-size: .8rem;
  }
  .index-tagGhost_1KCu_KY {
    border: .026667rem solid #ddd;
    border: .266667vw solid #ddd;
    border-radius: .053333rem;
    border-radius: .533333vw;
    padding: 0 .213333rem;
    padding: 0 2.133333vw;
  }
  .mini-tag-ghost_3DwLU8E_0, .NoDataTip-wrapper_1Gwf0tm {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 10px;
  }
  .index-recommendTag__2apOBL {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: .013333rem;
    border-radius: .133333vw;
    font-size: .266667rem;
    color: #666;
    height: .4rem;
    height: 4vw;
    padding: 0 .106667rem;
    padding: 0 1.066667vw;
    color: #e8470b;
  }
  .index-recommendTag__2apOBL img {
    margin-top: .04rem;
    margin-top: .4vw;
    height: .266667rem;
    height: 2.666667vw;
    width: .266667rem;
    width: 2.666667vw;
    margin-right: .08rem;
    margin-right: .8vw;
  }
  .index-dashedline_7B79b3W {
    width: 100%;
    height: .013333rem;
    height: .133333vw;
    padding-right: .266667rem;
    padding-right: 2.666667vw;
  }
  .index-activities_25AUDsx {
    position: relative;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    overflow: hidden;
  }
  .index-activities_25AUDsx, .index-supportWrap_2lTcxr2 {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .index-activityList_1wvwwUY {
    -webkit-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-right: .266667rem;
    padding-right: 2.666667vw;
    overflow: hidden;
  }
  .index-actRow_2f_uNNA {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .293333rem;
    line-height: .48rem;
    line-height: 4.8vw;
  }
  .index-actRow_2f_uNNA .index-iconWrap_1xJuKaY {
    display: inline-block;
    position: relative;
    margin-right: .16rem;
    margin-right: 1.6vw;
    height: .373333rem;
    height: 3.733333vw;
    width: .373333rem;
    width: 3.733333vw;
    vertical-align: middle;
  }
  .index-actRow_2f_uNNA .index-icon_1fBCxBk {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    height: .746667rem;
    height: 7.466667vw;
    width: .746667rem;
    width: 7.466667vw;
    font-size: .8rem;
    color: #fff;
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: .106667rem;
    border-radius: 1.066667vw;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  .index-actRow_2f_uNNA .index-desc_JLha7Vr {
    display: inline-block;
    -webkit-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .index-activityList_1wvwwUY>div:not(:first-child) {
    margin-top: .066667rem;
    margin-top: .666667vw;
  }
  .index-activityBtn_tMk-e1C {
    padding: .08rem .266667rem 0 0;
    padding: .8vw 2.666667vw 0 0;
    color: #999;
    text-align: right;
    font-size: .266667rem;
    line-height: 1;
  }
  .index-activityBtn_tMk-e1C span {
    vertical-align: middle;
  }
  .index-activityBtn_tMk-e1C img {
    width: .173333rem;
    width: 1.733333vw;
    opacity: .9;
    margin-left: .106667rem;
    margin-left: 1.066667vw;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    fill: currentColor;
    will-change: transform;
    vertical-align: middle;
    position: relative;
    z-index: 1;
  }
</style>
